<template>
    <view class="custom-tabs">
      <view class="custom-tabs-bar" v-for="(item, i) in data" :key="i" :class="{ active: i == active }" @click="changeTab(i)">
        <text class="tabbar-text">{{ item.label }}</text>
      </view>
    </view>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue'
  
  // 循环的数组
  defineProps<{
    data: { label: string }[]
  }>()
  // 高亮的索引
  const active = ref(0)
  // 本地记录，传递给父组件
  const changeTab = (i: number) => {
    active.value = i
    emit('change', i)
  }
  
  // 定义 emit
  const emit = defineEmits<{
    (e: 'change', active: number): void
  }>()
  </script>
  
  <style lang="scss" scoped>
  // 自定义tabbar
  .custom-tabs {
    display: flex;
    position: relative;
    padding: 0 30rpx;
  }
  
  .custom-tabs-bar {
    height: 80rpx;
    line-height: 80rpx;
    color: #979797;
    margin-right: 30rpx;
    position: relative;
  
    &.active {
      color: #121826;
      font-weight: 500;
      border-bottom: 2px solid #2cb5a5;
    }
  }
  
  .tabbar-text {
    font-size: 30rpx;
  }
  
  .custom-tabs-cursor {
    position: absolute;
    bottom: 3px;
    left: 20px;
  
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background-color: #2cb5a5;
    transition: all 0.3s ease-out;
  }
  </style>
  